:host {
  display: block;
  --ti-product-preview-main-small-size: 300px;
  --ti-product-preview-main-middle-size: 380px;
  --ti-product-preview-main-large-size: 450px;
  --ti-product-preview-thumb-small-size: calc(
    (
        var(--ti-product-preview-main-small-size) - var(--ti-product-preview-thumb-margin) * 3 -
          var(--ti-product-preview-thumb-page-button-size) * 2
      ) / 4;
  );
  --ti-product-preview-thumb-middle-size: calc(
    (
        var(--ti-product-preview-main-middle-size) - var(--ti-product-preview-thumb-margin) * 3 -
          var(--ti-product-preview-thumb-page-button-size) * 2
      ) / 4;
  );
  --ti-product-preview-thumb-large-size: calc(
    (
        var(--ti-product-preview-main-large-size) - var(--ti-product-preview-thumb-margin) * 3 -
          var(--ti-product-preview-thumb-page-button-size) * 2
      ) / 4;
  );
  --ti-product-preview-thumb-margin: var(--ti-common-space-2x);
  --ti-product-preview-thumb-page-size: var(--ti-common-size-6x);
  --ti-product-preview-thumb-page-margin: var(--ti-common-space-4x);
  --ti-product-preview-thumb-page-button-size: calc(
    var(--ti-product-preview-thumb-page-size) + var(--ti-product-preview-thumb-page-margin)
  );
}

::ng-deep .ti3-img-zoom-viewer {
  --ti-product-preview-main-small-size: 300px;
  --ti-product-preview-main-middle-size: 380px;
  --ti-product-preview-main-large-size: 450px;
}

::ng-deep .ti-product-preview-modal {
  --ti-product-preview-modal-width: 640px;
}
.ti-product-preview-container {
  width: 100%;
  .ti-product-preview-main {
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) var(--ti-common-color-line-dividing);
    box-sizing: border-box;
  }
  .ti-product-preview-thumb-container {
    margin-top: var(--ti-common-space-3x);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .ti-product-preview-thumb-wapper {
      flex: 1;
      overflow: hidden;
      .ti-product-preview-thumb {
        position: relative;
        left: 0;
        display: flex;
        .ti-product-preview-thumb-item {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          border: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) var(--ti-common-color-transparent);
          box-sizing: border-box;
          img {
            width: auto;
            height: auto;
          }
          &:not(:last-child) {
            margin-right: var(--ti-product-preview-thumb-margin);
          }
        }
        .ti-product-preview-thumb-item-active {
          border: 1px solid var(--ti-common-color-line-active);
          cursor: pointer;
        }
      }
    }
    .ti-product-preview-thumb-page {
      width: var(--ti-product-preview-thumb-page-size);
      height: var(--ti-product-preview-thumb-page-size);
      border-radius: var(--ti-common-border-radius-normal);
      position: relative;
      &:hover:not(.ti-product-preview-thumb-page-disabled) {
        cursor: pointer;
        color: var(--ti-common-color-icon-hover);
        background-color: var(--ti-common-color-bg-light-normal);
      }
      &:active:not(.ti-product-preview-thumb-page-disabled) {
        color: var(--ti-common-bg-minor-active);
        background-color: var(--ti-common-color-icon-active);
      }
      .ti-product-preview-icon {
        line-height: var(--ti-product-preview-thumb-page-size);
        font-size: var(--ti-common-font-size-5);
      }
    }
    .ti-product-preview-thumb-page-disabled {
      cursor: not-allowed;
      outline: none;
      color: var(--ti-common-color-icon-disabled);
    }
    .ti-product-preview-thumb-left {
      margin-right: var(--ti-product-preview-thumb-page-margin);
    }
    .ti-product-preview-thumb-right {
      margin-left: var(--ti-product-preview-thumb-page-margin);
    }
  }
}

.media(@mainSize, @thumbSize) {
  :host {
    width: @mainSize;
  }
  ::ng-deep .ti3-img-zoom-viewer {
    width: @mainSize !important;
    height: @mainSize !important;
  }
  .ti-product-preview-container {
    .ti-product-preview-main {
      height: @mainSize;
      img {
        max-width: calc(@mainSize - 2px);
        max-height: calc(@mainSize - 2px);
      }
      ::ng-deep .ti3-img-zoom-selector {
        width: calc(@mainSize / 2) !important;
        height: calc(@mainSize / 2) !important;
      }
    }
    .ti-product-preview-thumb-container {
      .ti-product-preview-thumb-wapper {
        .ti-product-preview-thumb {
          .ti-product-preview-thumb-item {
            width: @thumbSize;
            height: @thumbSize;
            img {
              max-width: calc(@thumbSize - 2px);
              max-height: calc(@thumbSize - 2px);
            }
          }
        }
      }
    }
  }
}

// 分辨率<1440px
@media screen and (max-width: 1440px) {
  .media(var(--ti-product-preview-main-small-size), var(--ti-product-preview-thumb-small-size));
}
// 1440<=分辨率<1600px
@media screen and (min-width: 1440px) and (max-width: 1600px) {
  .media(var(--ti-product-preview-main-middle-size), var(--ti-product-preview-thumb-middle-size));
}
// 分辨率>=1600px
@media screen and (min-width: 1600px) {
  .media(var(--ti-product-preview-main-large-size), var(--ti-product-preview-thumb-large-size));
}

::ng-deep .ti-product-preview-modal {
  width: var(--ti-product-preview-modal-width) !important;
  .ti3-modal-close {
    top: 0;
  }
  .ti3-image-preview-container {
    margin-top: var(--ti-common-space-2x) !important;
  }
}
